<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //es5面向对象-为了最大限度复用代码。面向对象也叫OOP，三大特点抽象，封装，多态
        // 应用：
        // 对外暴露属性 定义父类：放公共的属性的，对外暴露的属性

        function father(position, type) {
            this.position1 = position
            this.type1 = type
        }
        //构造函数原型上写逻辑方法
        father.prototype.setPosition = function () {
            if (this.position1 == 'left') {
                console.log('左边显示', this.position1);
            }
            if (this.position1 == 'right') {
                console.log('右边显示', this.position1);
            }
        }

        // 使用时通过new实例化传入对应的属性
        let f = new father('right')
        f.setPosition()

        //es6面向对象，通过class类 定义一个父类
        class user {
            constructor(name, password) {//constructor构造函数
                this.name1 = name
                this.password1 = password
            }
            showName(){
                console.log(this.name1);
            }
            showPass(){
                console.log(this.password1);
            }
        }

        var user1=new user('admin','123456')

        user1.showName()
        user1.showPass()
    </script>
</body>

</html>